<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提高4</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content-box {
            width: 200px;
            height: 200px;
            background-color: pink;
            box-sizing: content-box;
            padding: 10px;
            border: 15px solid red;
            /*盒子大小为width + padding + border content-box   会撑大盒子
            此值为期默认值，起让元素维持在w3c的标准box*/
        }

        .border-box {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            box-sizing: border-box; /*不会撑开盒子*/
            border: 15px solid red; /*盒子大小就只width*/

        }

        h1 {
            font-size: 100px;
            text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
        }

        .yinying {
            width: 200px;
            height: 200px;
            border: 5px solid blueviolet;
            box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.5) /*inset*/ /*inset 内阴影    外阴影直接省略*/;
        }

        .yinying:hover {
            box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.5)
        }

        .anli {
            width: 200px;
            height: 200px;
            line-height: 200px;
            background-color: pink;
            margin: 200px;
            background: url("../images/1.jpg") 0 0 no-repeat;
            font-size: 30px;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            border-radius: 50%; /*变成一个圆*/
            box-shadow: 5px 5px 10px 16px rgba(255, 255, 255, 0.4) inset,
            5px 4px 10px rgba(0, 0, 0, 0.3);
        }

        .huanrao {
            width: 400px;
            height: 110px;
            border: 1px solid pink;
            margin: 0 auto;
        }

        img {
            float: right; /*环绕文字*/
        }

        .fudong {
            height: 500px;
            background-color: #D9e0EE;
            border: 1px solid #000;
        }

        .fudong1 {
            width: 100px;
            height: 200px;
            background-color: pink;
            float: left; /*left是默认值*/
        }

        .fudong2 {
            height: 300px;
            width: 400px;
            background-color: skyblue;
            float: right;
        }

        .top,
        .banner,
        .main,
        .footer {
            width: 960px;
            margin: 0 auto;
            border: 1px dashed #000;
            text-align: center;
            background-color: #eee;
            margin: 5px;
        }

        .top {
            height: 20px;
        }

        .banner {
            height: 50px;
        }

        .main {
            height: 60px;
        }

        .left {
            width: 200px;
            float: left;
            height: 60px;
            background-color: pink;
        }

        .right {
            width: 750px;
            float: right;
            height: 60px;
            background-color: red;
        }

        .footer {
            height: 40px;
        }

        ul {
            list-style: none; /*取消无序列表的小点*/
        }

        .top1 {
            height: 60px;
            background-color: #000;

        }

        .banner1 {
            width: 960px;
            height: 400px;
            background-color: skyblue;
            margin: 20px auto;
            border-radius: 15px;
        }

        .main1 {
            width: 960px;
            margin: 0 auto;
            height: 200px;
        }

        .main1 ul li {
            width: 240px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .main1 ul li :nth-child(even) {
            background-color: purple;
        }

        .footer1 {
            height: 60px;
            background-color: #000;
        }

        .box1 {
            width: 600px;
            /*height: 200px;*/
            background-color: pink;
            /*overflow: hidden;!*触发一个BFC    可以清除浮动  这是解决方案后面讲解*!*/
        }

        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .son2 {
            width: 200px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }

        /*      .clearfix:before, .clearfix:after {
                    content: "";
                    display: table;
                }

                .clearfix:after {
                    clear: both;
                }

                .clearfix {
                    *zoom: 1;
                }
                此方法也可以清除浮动带来的影响
                */

        .box2 {
            width: 600px;
            height: 200px;
            background-color: purple;
        }

        /*
              .clear {
                    clear: both; !*<!--清除浮动带来的影响-->*!
                }
         */

        /*        .clearfix:after{
                    content: ".";!*内容为小点 尽量不要为空，否则旧版本的浏览器会有空隙*!
                    display: block;!*转化为块级元素*!
                    height: 0;!*高度为0*!
                    visibility: hidden;!*隐藏盒子*!
                    clear: both;!*清除浮动*!
                }
          */

        /*但是如果son1和son2都浮动了，浮动的元素不占位置父亲没有高度地下的盒子就会跑上来*/
    </style>
</head>
<body>
<div class="content-box">content-box</div>
<div class="border-box">border-box</div>
<br><br><br>
<h1>稳住 稳住 稳住</h1>
<div class="yinying"></div>
<div class="anli">图片</div>
<div class="huanrao">
    稳住 稳住 稳住稳住 稳住 稳住稳住
    稳住稳住 稳住 稳住稳住 稳住
    <img src="../images/1.jpg" height="26" width="206"/>
    稳住稳住 稳住 稳住稳住 稳住
    稳住稳住 稳住 稳住稳住 稳住
    稳住稳住 稳住 稳住稳住 稳住
    稳住稳住 稳住 稳住
</div>
<br><br><br><br>
<div class="fudong">
    <div class="fudong1"></div>
    <div class="fudong2"></div>
</div>
<br><br><br><br>
<div>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>
<br><br><br><br>
<div class="top1">top</div>
<div class="banner1">banner</div>
<div class="main1">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div class="footer1">footer</div>
<br><br><br><br><br><br><br><br>
<div class="box1 clearfix">
    <div class="son1"></div>
    <div class="son2"></div>
    <div class="clear"></div><!--清除浮动带来的影响-->
</div>
<div class="box2"></div>


<br><br><br><br>
</body>
</html>